<template>
     
    <div>
            <el-page-header @back="goBack" content="语音转文字" />    
        <div class="bank"></div>
           
        <el-card header="语音转文字">
                 
            <el-card>
                       
                <el-input :readonly="true" id="word" v-model="word"></el-input>   
                 
            </el-card>
                 
            <el-card>
                       
                <el-button type="primary" @click="audioCHangeWord"><span v-if="isListening">语音识别中...</span><span
                        v-else>语音识别</span></el-button>
                     
            </el-card>
               
        </el-card>
         
    </div>
</template>

<script>
export default {
    name: "AudioToWord",
    data() {
        return {
            word: "",
            isListening: false, // 判断是否在语音监听中
        };
    },
    methods: {
        audioCHangeWord() {
            var that = this;
            that.word = "";
            // 创建SpeechRecognition对象
            // eslint-disable-next-line no-undef
            var recognition = new webkitSpeechRecognition();
            if (!recognition) {
                // eslint-disable-next-line no-undef
                recognition = new SpeechRecognition();
            }
            // 设置语言
            recognition.lang = "zh-CN";
            // 开始语音识别
            recognition.start();
            that.isListening = true;
            // 监听识别结果
            recognition.onresult = function (event) {
                var result = event.results[0][0].transcript;
                that.word = result;
            };

            // 监听错误事件
            recognition.onerror = function (event) {
                that.isListening = false;
                that.$message("监听语音失败:" + event.error);
                console.error(event.error);
            };
            // 监听结束事件（包括识别成功、识别错误和用户停止）
            recognition.onend = function () {
                that.isListening = false;
                console.log("语音识别停止");
            };
        },
        goBack() {
            this.$router.push({ path: "/entry" });
        },
    },
};
</script>
